<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="listview_mobile">
        <title>Overview | Hybrid UI ListView</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Initialize and take full advantage of the Hybrid UI ListView widget in the Kendo UI framework.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/hybrid/listview/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/hybrid/listview/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="hybrid-ui-listview-overview"><a href="#hybrid-ui-listview-overview">Hybrid UI ListView Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/m/index#mobile-listview/index">Hybrid UI ListView widget</a> is used to display flat or grouped lists of items. It can be either used in the unbound mode by enhancing an HTML <code>ul</code> element, or bound to a DataSource instance.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<p>The Kendo UI mobile Application automatically initializes a mobile ListView for every <code>ul</code> element with the <code>role</code> data attribute set to <code>listview</code> and present in the application Views. Alternatively, it can be initialized using jQuery plugin syntax in the containing mobile View <code>init</code> event handler. The mobile ListView element may contain one or more <code>li</code> elements.</p>

<h3 id="initialize-from-markup"><a href="#initialize-from-markup">Initialize from Markup</a></h3>

<p>The example below demonstrates how to initialize the Hybrid UI ListView widget from markup.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-role="listview"&gt;
    &lt;li&gt;Foo&lt;/li&gt;
    &lt;li&gt;Bar&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3 id="initialize-using-jquery"><a href="#initialize-using-jquery">Initialize Using jQuery</a></h3>

<p>The example below demonstrates how to initialize the Hybrid UI ListView widgets using jQuery plugin syntax.</p>

<h6>Example</h6>

<pre><code>&lt;div data-role="view" data-init="initListView"&gt;
    &lt;ul id="listView"&gt;&lt;/ul&gt;
&lt;/div&gt;

&lt;script&gt;
    function initListView(e) {
        e.view.element.find("#listView").kendoMobileListView();
    }
&lt;/script&gt;
</code></pre>

<h2 id="display"><a href="#display">Display</a></h2>

<h3 id="inset-listviews"><a href="#inset-listviews">Inset ListViews</a></h3>

<p>In iOS, the mobile ListView appearance can be changed to <code>inset</code>, to achieve an effect similar to the iOS grouped table views, where the list items are padded from the container, and have rounded corners. To do so, set the <code>style</code> data attribute to <code>inset</code>.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>This setting does not affect the appearance of the mobile ListView on Android/Blackberry devices.</p>
</blockquote>

<p>The example below demonstrates how to create an inset mobile ListView.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-role="listview" data-style="inset"&gt;
  &lt;li&gt;Foo&lt;/li&gt;
  &lt;li&gt;Bar&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3 id="grouped-listviews"><a href="#grouped-listviews">Grouped ListViews</a></h3>

<p>The mobile ListView can display items in groups, with optional headers. This can be achieved by nesting unordered lists in items, and setting the widget's element <code>type</code> data-attribute to <code>group</code>.</p>

<p>The example below demonstrates how to create a grouped Hybrid UI ListView.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-role="listview" data-type="group"&gt;
    &lt;li&gt;
        Foo
        &lt;ul&gt;
            &lt;li&gt;Bar&lt;/li&gt;
            &lt;li&gt;Baz&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        Bar
        &lt;ul&gt;
            &lt;li&gt;Bar&lt;/li&gt;
            &lt;li&gt;Qux&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h2 id="data-binding"><a href="#data-binding">Data Binding</a></h2>

<h3 id="bind-to-local-arrays"><a href="#bind-to-local-arrays">Bind to Local Arrays</a></h3>

<p>The Hybrid UI ListView widget can be bound to both local JavaScript arrays and remote data via the Kendo UI DataSource component. Local JavaScript arrays are appropriate for limited value options, while remote data binding is better for larger data sets.</p>

<p>The example below demonstrates how to bind a Hybrid UI ListView to a local data source.</p>

<h6>Example</h6>

<pre><code>function initListView(e) {
    e.view.element.find("#listview").kendoMobileListView({
        dataSource: kendo.data.DataSource.create(["foo", "bar", "baz"])
     });
});
</code></pre>

<h2 id="customization"><a href="#customization">Customization</a></h2>

<h3 id="item-templates"><a href="#item-templates">Item Templates</a></h3>

<p>The hybrid mobile ListView leverages Kendo UI high-performance Templates to provide complete control over item rendering. For a complete overview of Kendo UI Template capabilities and syntax, refer to the <a href="/framework/templates/overview">article on Kendo UI Templates</a>.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>The ListView automatically wraps the template content in a <code>&lt;li&gt;</code> tag. Putting a <code>&lt;li&gt;</code> tag inside the template creates invalid nesting of elements.</p>
</blockquote>

<p>The example below demonstrates basic item template customization.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="listview"&gt;&lt;/ul&gt;

&lt;script type="text/javascript"&gt;
    function initListView(e) {
        e.view.element.find("#listview").kendoMobileListView({
            template : "&lt;strong&gt;#:data.foo#&lt;/strong&gt;",
            dataSource: kendo.data.DataSource.create([{foo: "bar"}, {foo: "baz"}])
        });
    });
&lt;/script&gt;
</code></pre>

<p>The example below demonstrates how to set an item template via the data attribute.</p>

<h6>Example</h6>

<pre><code>&lt;div id="foo" data-role="view"&gt;
    &lt;ul id="list" data-role="listview" data-source="dataSource" data-template="tmp"&gt;&lt;/ul&gt;
&lt;/div&gt;

&lt;script id="tmp" type="text/x-kendo-template"&gt;
    &lt;p&gt;#: name # &lt;span&gt;Age: #: age #&lt;/span&gt;&lt;/p&gt;
&lt;/script&gt;

&lt;script&gt;
    var app = new kendo.mobile.Application();
    var dataSource = new kendo.data.DataSource({
        data: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
        ]
    });
&lt;/script&gt;
</code></pre>

<h3 id="link-items"><a href="#link-items">Link Items</a></h3>

<p>The mobile ListView automatically styles items with a single link element inside, adding a details indicator.</p>

<p>The example below demonstrates a Hybrid UI ListView with link items.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-role="listview"&gt;
  &lt;li&gt;&lt;a href="#foo"&gt;Foo&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#bar"&gt;Bar&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3 id="detail-buttons"><a href="#detail-buttons">Detail Buttons</a></h3>

<p>Mobile ListView integrates with nested DetailButton widgets. These buttons are best suited when users should be able to execute more than one action on a given row. besides custom icons, the detail buttons support four default data-styles through the data-icon attribute:</p>

<ul>
<li><code>contactadd</code></li>
<li><code>detaildisclose</code></li>
<li><code>rowinsert</code></li>
<li><code>rowdelete</code></li>
</ul>

<p>One row can contain both regular links and detail buttons.</p>

<p>The example below demonstrates a Hybrid UI ListView with detail buttons.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-role="listview" data-style="inset" data-type="group"&gt;
    &lt;li&gt;
        Default button styles
        &lt;ul&gt;
            &lt;li&gt;Contact Add&lt;a data-role="detailbutton" data-style="contactadd"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;Detail Disclose&lt;a data-role="detailbutton" data-style="detaildisclose"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;Row Insert&lt;a data-role="detailbutton" data-style="rowinsert"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;Row Delete&lt;a data-role="detailbutton" data-style="rowdelete"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        Custom icons
        &lt;ul&gt;
            &lt;li&gt;Battery level&lt;a data-role="detailbutton" data-icon="battery"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        Link Items &amp; Detail Buttons
        &lt;ul&gt;
            &lt;li&gt;&lt;a&gt;Row Insert&lt;/a&gt;&lt;a data-role="detailbutton" data-style="rowinsert"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Battery Level&lt;/a&gt;&lt;a data-role="detailbutton" data-icon="battery"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h2 id="item-icons-configuration"><a href="#item-icons-configuration">Item Icons Configuration</a></h2>

<p>An item icon can be set in two ways:</p>

<ol>
<li>By adding an <code>img</code> element inside the <code>li</code> element.</li>
<li>By setting a <code>data-icon</code> attribute to the <code>li</code> element. In this case an <code>a</code> element should be placed inside the <code>li</code> element. The icon CSS class will be applied to the <code>a</code> element.</li>
</ol>

<p>The example below demonstrates how to use font icons with the <code>data-icon</code> attribute.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-role="listview" data-style="inset"&gt;
  &lt;li data-icon="home"&gt;
     &lt;a&gt;Home&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<blockquote>
<p><strong>Important</strong></p>

<p>Kendo UI ships with several ready to use icons. The full list of predefined icons can be seen in the <a href="/controls/hybrid/styles/icons">article on icons</a>.</p>
</blockquote>

<p>Additional icons may be added by defining the respective CSS class. If the <code>data-icon</code> attribute is set to <code>custom</code>, the item receives the <code>km-custom</code> CSS class.</p>

<h3 id="create-custom-icons-before-q3-2012"><a href="#create-custom-icons-before-q3-2012">Create Custom Icons before Q3 2012</a></h3>

<p>To create colorizable icons like the default ones in the hybrid Kendo UI platform, specify the icon image as a box mask—either as a <code>dataURI</code> or as a separate image. The image should be <code>PNG8</code> or <code>PNG24</code> with an alpha channel—<code>PNG8+Alpha</code> is supported only by few graphic editors, so better stick with <code>PNG24</code>. The image color is not important as it is going to be used as a mask only.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>BlackBerry 7.0 has a bug that renders its masks as a background-image, so it is recommended to use white to support it. The bug is fixed in the 7.1 release.</p>
</blockquote>

<p>The example below demonstrates how to defined a custom list item icon.</p>

<h6>Example</h6>

<pre><code>&lt;style&gt;
    .km-custom {
      -webkit-mask-box-image: url("foo.png");
    }
&lt;/style&gt;

&lt;ul data-role="listview" data-style="inset"&gt;
  &lt;li data-icon="custom"&gt;
     &lt;a&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
     Bar
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3 id="create-custom-icons-after-q3-2012"><a href="#create-custom-icons-after-q3-2012">Create Custom Icons after Q3 2012</a></h3>

<p>In the Kendo UI Q3 2012 release, due to numerous issues with the WebKit mask icons, they were deprecated and Kendo UI introduced font icons for its hybrid mobile platform. Since the font is not easily editable, the previous method for a mask icon can be used with some additional styling.</p>

<p>The example below demonstrates how to define custom list item icons after the Kendo UI Q3 2012 release. Note that the code from this demo will restyle all font icons.</p>

<h6>Example</h6>

<pre><code>&lt;style&gt;
    /* Remove font icons styling, use .km- + data-icon name if only one should be overridden */
    .km-root .km-pane .km-view .km-icon {
        background-size: 100% 100%;
        -webkit-background-clip: border-box;
        background-color: currentcolor;
    }

    .km-custom {
        -webkit-mask-box-image: url("foo.png");
        background-color: red;
    }
&lt;/style&gt;

&lt;ul data-role="listview" data-style="inset"&gt;
  &lt;li data-icon="custom"&gt;
     &lt;a&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
     Bar
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<!--*-->

<h3 id="restyle-added-custom-icons-only"><a href="#restyle-added-custom-icons-only">Restyle Added Custom Icons Only</a></h3>

<p>If you want to add only one or two custom icons, specify them with their respective classes—<code>.km-</code> and the data-icon name, as shown in the example below.</p>

<h6>Example</h6>

<pre><code>.km-root .km-pane .km-view .km-question {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: currentcolor;
}

.km-question {
    -webkit-mask-box-image: url("foo.png");
    background-color: red;
}
</code></pre>

<h3 id="hide-all-hybrid-ui-font-icons"><a href="#hide-all-hybrid-ui-font-icons">Hide All Hybrid UI Font Icons</a></h3>

<p>When custom icons are used and their names are the same as the integrated Hybrid UI icon names, make sure that the font icons are not rendered.</p>

<p>The example below demonstrates how to hide all Hybrid UI font icons.</p>

<h6>Example</h6>

<pre><code>/* Don't render all internal Kendo UI font icons
.km-root .km-pane .km-view .km-icon:after,
.km-root .km-pane .km-view .km-icon:before
{
    visibility: hidden;
}
</code></pre>

<h3 id="hide-specific-hybrid-ui-font-icons"><a href="#hide-specific-hybrid-ui-font-icons">Hide Specific Hybrid UI Font Icons</a></h3>

<p>Again if only several icons should be overridden, specify them with their classes instead, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre><code>.km-root .km-pane .km-view .km-favorites:after,
.km-root .km-pane .km-view .km-favorites:before
{
    visibility: hidden;
}
</code></pre>

<h2 id="nova-theme-features"><a href="#nova-theme-features">Nova Theme Features</a></h2>

<h3 id="tags"><a href="#tags">Tags</a></h3>

<p>To activate this feature add span with <code>km-badge</code> class, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-role="listview" data-style="inset"&gt;
    &lt;li&gt;
        &lt;a&gt;Home&lt;span class="km-badge"&gt;NEW&lt;/span&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        Bar
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3 id="icons"><a href="#icons">Icons</a></h3>

<p>Icons shift the whole ListView to the right. The grouping headers are also indented. To activate this feature, set <code>km-listview-icons</code> class, as shown in the example below.</p>

<h6>Example</h6>

<pre><code> &lt;ul data-role="listview" class="km-listview-icons"&gt;
   &lt;li data-icon="downloads"&gt;&lt;a href="#drawer-home"&gt;Inbox&lt;/a&gt;&lt;/li&gt;
   &lt;li data-icon="favorites"&gt;&lt;a href="#drawer-starred"&gt;Starred Items&lt;/a&gt;&lt;/li&gt;        
 &lt;/ul&gt;
</code></pre>

<h3 id="thumbnails"><a href="#thumbnails">Thumbnails</a></h3>

<p>Thumbnails shift the whole ListView to the right. The grouping headers are also indented. To activate this feature, set <code>km-thumbnail</code> to the images, as demonstrated in the example below.</p>

<h6>Example</h6>

<pre><code>  &lt;ul data-role="listview" class="km-listview-icons"&gt;
    &lt;li&gt;
      &lt;img src="../content/web/foods/1.jpg" alt="Chai image" class="km-thumbnail"&gt;
      &lt;!-- ... --&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles and how-to examples on the Hybrid UI ListView:</p>

<ul>
<li><a href="/api/javascript/mobile/ui/listview">Hybrid UI ListView JavaScript API Reference</a></li>
<li><a href="/controls/hybrid/listview/overview">Overview of the Hybrid UI ListView</a></li>
<li><a href="/controls/hybrid/listview/endless-scrolling">Endless Scrolling Feature</a></li>
<li><a href="/controls/hybrid/listview/pull-to-refresh">Pull-to-Refresh Feature</a></li>
</ul>

<p>For how-to examples on the Kendo UI hybrid ListView, browse its <a href="/controls/hybrid/listview/how-to/group-data"><strong>How To</strong> documentation folder</a>.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

